<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mindful Musings | Personal Blog</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Tailwind Configuration -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#2563EB", // Blue
              secondary: "#7C3AED", // Purple
              accent: "#F97316", // Orange
              dark: {
                100: "#1E293B",
                200: "#0F172A",
                300: "#020617",
              },
              light: {
                100: "#F8FAFC",
                200: "#F1F5F9",
                300: "#E2E8F0",
              },
            },
            fontFamily: {
              sans: ["Inter", "sans-serif"],
              serif: ["Playfair Display", "serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-balance {
          text-wrap: balance;
        }
        .card-hover {
          transition: all 0.3s ease;
        }
        .card-hover:hover {
          transform: translateY(-5px);
        }
        .gradient-overlay {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.7) 100%
          );
        }
      }
    </style>
  </head>

  <body
    class="font-sans bg-light-100 dark:bg-dark-200 text-gray-800 dark:text-gray-200 transition-colors duration-300"
  >
    <!-- Theme Toggle Button -->
    <button
      id="theme-toggle"
      class="fixed top-6 right-6 p-3 rounded-full bg-white/80 dark:bg-dark-100/80 shadow-lg backdrop-blur-sm text-primary hover:bg-white dark:hover:bg-dark-100 z-50 transition-all duration-300"
    >
      <i class="fa fa-sun-o dark:hidden" aria-hidden="true"></i>
      <i class="fa fa-moon-o hidden dark:block" aria-hidden="true"></i>
    </button>

    <!-- Header with Navigation -->
    <header
      class="sticky top-0 bg-white/90 dark:bg-dark-200/90 backdrop-blur-md shadow-sm z-40 transition-all duration-300"
    >
      <div class="container mx-auto px-4">
        <nav class="flex items-center justify-between py-4">
          <a href="#" class="text-2xl font-serif font-bold text-primary">
            Mindful Musings
          </a>

          <!-- Desktop Navigation -->
          <div class="hidden md:flex items-center space-x-8">
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Home</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Articles</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Categories</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >About</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Contact</a
            >
          </div>

          <!-- Mobile menu button -->
          <button
            id="mobile-menu-button"
            class="md:hidden p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary"
          >
            <i class="fa fa-bars text-xl" aria-hidden="true"></i>
          </button>
        </nav>

        <!-- Mobile Navigation -->
        <div
          id="mobile-menu"
          class="md:hidden hidden pb-4 border-t dark:border-gray-700 animate-fade-in-down"
        >
          <div class="flex flex-col space-y-3 pt-3">
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Home</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Articles</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Categories</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >About</a
            >
            <a
              href="#"
              class="font-medium hover:text-primary dark:hover:text-primary transition-colors"
              >Contact</a
            >
          </div>
        </div>
      </div>
    </header>

    <main class="container mx-auto px-4 py-8">
      <!-- Hero Section -->
      <section class="mb-16">
        <div class="relative rounded-2xl overflow-hidden h-[500px] mb-8">
          <img
            src="https://picsum.photos/id/1015/1200/800"
            alt="Mountain landscape with fog and trees"
            class="w-full h-full object-cover"
          />
          <div
            class="absolute inset-0 gradient-overlay flex flex-col justify-end p-8 md:p-12"
          >
            <span
              class="inline-block px-3 py-1 bg-accent text-white text-sm font-medium rounded-full mb-4 w-fit"
              >Featured</span
            >
            <h1
              class="text-3xl md:text-5xl font-serif font-bold text-white mb-4 max-w-3xl"
            >
              The Art of Mindfulness in a Fast-Paced World
            </h1>
            <p class="text-gray-200 mb-6 max-w-2xl">
              Discover how to cultivate mindfulness practices amid the chaos of
              modern life and find peace in everyday moments.
            </p>
            <div class="flex items-center">
              <img
                src="https://picsum.photos/id/64/100/100"
                alt="Author portrait"
                class="w-10 h-10 rounded-full object-cover mr-3"
              />
              <div>
                <p class="text-white font-medium">Emma Thompson</p>
                <p class="text-gray-300 text-sm">June 15, 2023 · 8 min read</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Main Content Area -->
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Blog Posts -->
        <div class="lg:col-span-3">
          <!-- Category Filters -->
          <div class="mb-10 overflow-x-auto pb-2">
            <div class="flex space-x-2 min-w-max">
              <button
                class="category-filter active px-4 py-2 rounded-full bg-primary text-white font-medium transition-all"
              >
                All Articles
              </button>
              <button
                class="category-filter px-4 py-2 rounded-full bg-light-200 dark:bg-dark-100 hover:bg-light-300 dark:hover:bg-dark-300 font-medium transition-all"
              >
                Mindfulness
              </button>
              <button
                class="category-filter px-4 py-2 rounded-full bg-light-200 dark:bg-dark-100 hover:bg-light-300 dark:hover:bg-dark-300 font-medium transition-all"
              >
                Productivity
              </button>
              <button
                class="category-filter px-4 py-2 rounded-full bg-light-200 dark:bg-dark-100 hover:bg-light-300 dark:hover:bg-dark-300 font-medium transition-all"
              >
                Wellness
              </button>
              <button
                class="category-filter px-4 py-2 rounded-full bg-light-200 dark:bg-dark-100 hover:bg-light-300 dark:hover:bg-dark-300 font-medium transition-all"
              >
                Creativity
              </button>
              <button
                class="category-filter px-4 py-2 rounded-full bg-light-200 dark:bg-dark-100 hover:bg-light-300 dark:hover:bg-dark-300 font-medium transition-all"
              >
                Technology
              </button>
            </div>
          </div>

          <!-- Blog Posts Grid -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Blog Post 1 -->
            <article
              class="bg-white dark:bg-dark-100 rounded-xl overflow-hidden shadow-md card-hover"
            >
              <div class="relative h-56 overflow-hidden">
                <img
                  src="https://picsum.photos/id/1000/600/400"
                  alt="Morning routine with journal and coffee"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <span
                  class="absolute top-4 left-4 px-3 py-1 bg-primary/90 text-white text-xs font-medium rounded-full"
                  >Productivity</span
                >
              </div>
              <div class="p-6">
                <h2
                  class="font-serif font-bold text-xl mb-3 hover:text-primary transition-colors"
                >
                  <a href="#">10 Morning Rituals for a Productive Day</a>
                </h2>
                <p
                  class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3"
                >
                  Start your day with intention using these simple yet effective
                  morning rituals that can transform your productivity and
                  mindset.
                </p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img
                      src="https://picsum.photos/id/91/100/100"
                      alt="Author portrait"
                      class="w-8 h-8 rounded-full object-cover mr-2"
                    />
                    <span class="text-sm text-gray-700 dark:text-gray-300"
                      >Michael Chen</span
                    >
                  </div>
                  <span class="text-sm text-gray-500 dark:text-gray-500"
                    >June 8, 2023</span
                  >
                </div>
              </div>
            </article>

            <!-- Blog Post 2 -->
            <article
              class="bg-white dark:bg-dark-100 rounded-xl overflow-hidden shadow-md card-hover"
            >
              <div class="relative h-56 overflow-hidden">
                <img
                  src="https://picsum.photos/id/1060/600/400"
                  alt="Meditation in nature"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <span
                  class="absolute top-4 left-4 px-3 py-1 bg-primary/90 text-white text-xs font-medium rounded-full"
                  >Mindfulness</span
                >
              </div>
              <div class="p-6">
                <h2
                  class="font-serif font-bold text-xl mb-3 hover:text-primary transition-colors"
                >
                  <a href="#">Meditation for Beginners: A Complete Guide</a>
                </h2>
                <p
                  class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3"
                >
                  New to meditation? This comprehensive guide will teach you the
                  basics and help you establish a consistent practice.
                </p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img
                      src="https://picsum.photos/id/64/100/100"
                      alt="Author portrait"
                      class="w-8 h-8 rounded-full object-cover mr-2"
                    />
                    <span class="text-sm text-gray-700 dark:text-gray-300"
                      >Emma Thompson</span
                    >
                  </div>
                  <span class="text-sm text-gray-500 dark:text-gray-500"
                    >May 29, 2023</span
                  >
                </div>
              </div>
            </article>

            <!-- Blog Post 3 -->
            <article
              class="bg-white dark:bg-dark-100 rounded-xl overflow-hidden shadow-md card-hover"
            >
              <div class="relative h-56 overflow-hidden">
                <img
                  src="https://picsum.photos/id/225/600/400"
                  alt="Healthy meal preparation"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <span
                  class="absolute top-4 left-4 px-3 py-1 bg-primary/90 text-white text-xs font-medium rounded-full"
                  >Wellness</span
                >
              </div>
              <div class="p-6">
                <h2
                  class="font-serif font-bold text-xl mb-3 hover:text-primary transition-colors"
                >
                  <a href="#">Nutrition Basics: Fuel Your Body Right</a>
                </h2>
                <p
                  class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3"
                >
                  Understanding the fundamentals of nutrition can help you make
                  better food choices and support your overall wellbeing.
                </p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img
                      src="https://picsum.photos/id/55/100/100"
                      alt="Author portrait"
                      class="w-8 h-8 rounded-full object-cover mr-2"
                    />
                    <span class="text-sm text-gray-700 dark:text-gray-300"
                      >Sophia Rodriguez</span
                    >
                  </div>
                  <span class="text-sm text-gray-500 dark:text-gray-500"
                    >May 15, 2023</span
                  >
                </div>
              </div>
            </article>

            <!-- Blog Post 4 -->
            <article
              class="bg-white dark:bg-dark-100 rounded-xl overflow-hidden shadow-md card-hover"
            >
              <div class="relative h-56 overflow-hidden">
                <img
                  src="https://picsum.photos/id/42/600/400"
                  alt="Artist working on a painting"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <span
                  class="absolute top-4 left-4 px-3 py-1 bg-primary/90 text-white text-xs font-medium rounded-full"
                  >Creativity</span
                >
              </div>
              <div class="p-6">
                <h2
                  class="font-serif font-bold text-xl mb-3 hover:text-primary transition-colors"
                >
                  <a href="#">Cultivating Creativity in Your Daily Life</a>
                </h2>
                <p
                  class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3"
                >
                  Creativity isn't just for artists. Learn simple ways to
                  nurture your creative side and bring more innovation to
                  everyday tasks.
                </p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img
                      src="https://picsum.photos/id/177/100/100"
                      alt="Author portrait"
                      class="w-8 h-8 rounded-full object-cover mr-2"
                    />
                    <span class="text-sm text-gray-700 dark:text-gray-300"
                      >James Wilson</span
                    >
                  </div>
                  <span class="text-sm text-gray-500 dark:text-gray-500"
                    >April 30, 2023</span
                  >
                </div>
              </div>
            </article>

            <!-- Blog Post 5 -->
            <article
              class="bg-white dark:bg-dark-100 rounded-xl overflow-hidden shadow-md card-hover"
            >
              <div class="relative h-56 overflow-hidden">
                <img
                  src="https://picsum.photos/id/180/600/400"
                  alt="Digital minimalism concept"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <span
                  class="absolute top-4 left-4 px-3 py-1 bg-primary/90 text-white text-xs font-medium rounded-full"
                  >Technology</span
                >
              </div>
              <div class="p-6">
                <h2
                  class="font-serif font-bold text-xl mb-3 hover:text-primary transition-colors"
                >
                  <a href="#">Digital Minimalism: Less Screen, More Life</a>
                </h2>
                <p
                  class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3"
                >
                  How reducing your digital footprint can improve your mental
                  health, productivity, and relationships with others.
                </p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img
                      src="https://picsum.photos/id/91/100/100"
                      alt="Author portrait"
                      class="w-8 h-8 rounded-full object-cover mr-2"
                    />
                    <span class="text-sm text-gray-700 dark:text-gray-300"
                      >Michael Chen</span
                    >
                  </div>
                  <span class="text-sm text-gray-500 dark:text-gray-500"
                    >April 18, 2023</span
                  >
                </div>
              </div>
            </article>

            <!-- Blog Post 6 -->
            <article
              class="bg-white dark:bg-dark-100 rounded-xl overflow-hidden shadow-md card-hover"
            >
              <div class="relative h-56 overflow-hidden">
                <img
                  src="https://picsum.photos/id/1068/600/400"
                  alt="Person practicing yoga outdoors"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <span
                  class="absolute top-4 left-4 px-3 py-1 bg-primary/90 text-white text-xs font-medium rounded-full"
                  >Wellness</span
                >
              </div>
              <div class="p-6">
                <h2
                  class="font-serif font-bold text-xl mb-3 hover:text-primary transition-colors"
                >
                  <a href="#">Movement as Medicine: Finding Joy in Exercise</a>
                </h2>
                <p
                  class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3"
                >
                  Discover how to transform your relationship with physical
                  activity and make movement a joyful part of your daily
                  routine.
                </p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img
                      src="https://picsum.photos/id/55/100/100"
                      alt="Author portrait"
                      class="w-8 h-8 rounded-full object-cover mr-2"
                    />
                    <span class="text-sm text-gray-700 dark:text-gray-300"
                      >Sophia Rodriguez</span
                    >
                  </div>
                  <span class="text-sm text-gray-500 dark:text-gray-500"
                    >April 5, 2023</span
                  >
                </div>
              </div>
            </article>
          </div>

          <!-- Load More Button -->
          <div class="mt-12 text-center">
            <button
              class="px-6 py-3 bg-white dark:bg-dark-100 border border-gray-300 dark:border-gray-700 rounded-lg font-medium hover:bg-light-200 dark:hover:bg-dark-300 transition-all duration-300 flex items-center mx-auto"
            >
              <span>Load More Articles</span>
              <i class="fa fa-chevron-down ml-2" aria-hidden="true"></i>
            </button>
          </div>
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-1 space-y-8">
          <!-- About Author -->
          <div class="bg-white dark:bg-dark-100 rounded-xl shadow-md p-6">
            <div class="text-center mb-4">
              <img
                src="https://picsum.photos/id/64/200/200"
                alt="Author profile picture"
                class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-primary/20"
              />
              <h3 class="font-serif font-bold text-xl mt-4 mb-1">
                Emma Thompson
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm">
                Mindfulness Practitioner & Writer
              </p>
            </div>
            <p
              class="text-gray-700 dark:text-gray-300 text-sm mb-4 text-balance"
            >
              Exploring the intersection of mindfulness, productivity, and
              wellness in modern life. Sharing practical insights and actionable
              strategies.
            </p>
            <div class="flex justify-center space-x-4">
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-twitter" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-instagram" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-linkedin" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-youtube-play" aria-hidden="true"></i>
              </a>
            </div>
          </div>

          <!-- Newsletter -->
          <div
            class="bg-gradient-to-br from-primary to-secondary rounded-xl shadow-md p-6 text-white"
          >
            <h3 class="font-serif font-bold text-xl mb-3">
              Join the Newsletter
            </h3>
            <p class="text-white/80 text-sm mb-4">
              Get weekly insights, tips, and exclusive content delivered
              straight to your inbox.
            </p>
            <form class="space-y-3">
              <input
                type="email"
                placeholder="Your email address"
                class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/50"
                required
              />
              <button
                type="submit"
                class="w-full px-4 py-3 bg-white text-primary font-medium rounded-lg hover:bg-white/90 transition-colors"
              >
                Subscribe
              </button>
            </form>
            <p class="text-white/60 text-xs mt-3 text-center">
              We respect your privacy. Unsubscribe at any time.
            </p>
          </div>

          <!-- Popular Posts -->
          <div class="bg-white dark:bg-dark-100 rounded-xl shadow-md p-6">
            <h3 class="font-serif font-bold text-xl mb-4">Popular Posts</h3>
            <div class="space-y-4">
              <a href="#" class="flex gap-3 group">
                <img
                  src="https://picsum.photos/id/1000/100/100"
                  alt="Post thumbnail"
                  class="w-20 h-20 rounded object-cover flex-shrink-0"
                />
                <div>
                  <h4
                    class="font-medium text-sm group-hover:text-primary transition-colors line-clamp-2"
                  >
                    10 Morning Rituals for a Productive Day
                  </h4>
                  <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">
                    June 8, 2023
                  </p>
                </div>
              </a>
              <a href="#" class="flex gap-3 group">
                <img
                  src="https://picsum.photos/id/1060/100/100"
                  alt="Post thumbnail"
                  class="w-20 h-20 rounded object-cover flex-shrink-0"
                />
                <div>
                  <h4
                    class="font-medium text-sm group-hover:text-primary transition-colors line-clamp-2"
                  >
                    Meditation for Beginners: A Complete Guide
                  </h4>
                  <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">
                    May 29, 2023
                  </p>
                </div>
              </a>
              <a href="#" class="flex gap-3 group">
                <img
                  src="https://picsum.photos/id/180/100/100"
                  alt="Post thumbnail"
                  class="w-20 h-20 rounded object-cover flex-shrink-0"
                />
                <div>
                  <h4
                    class="font-medium text-sm group-hover:text-primary transition-colors line-clamp-2"
                  >
                    Digital Minimalism: Less Screen, More Life
                  </h4>
                  <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">
                    April 18, 2023
                  </p>
                </div>
              </a>
            </div>
          </div>

          <!-- Tags Cloud -->
          <div class="bg-white dark:bg-dark-100 rounded-xl shadow-md p-6">
            <h3 class="font-serif font-bold text-xl mb-4">Tags</h3>
            <div class="flex flex-wrap gap-2">
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >mindfulness</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >productivity</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >wellness</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >creativity</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >technology</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >yoga</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >nutrition</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >meditation</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >habit building</a
              >
              <a
                href="#"
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 text-sm rounded-full hover:bg-primary hover:text-white transition-colors"
                >self care</a
              >
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer
      class="bg-white dark:bg-dark-100 mt-20 py-12 border-t dark:border-gray-800"
    >
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          <div class="md:col-span-2">
            <a
              href="#"
              class="text-2xl font-serif font-bold text-primary mb-4 inline-block"
              >Mindful Musings</a
            >
            <p class="text-gray-600 dark:text-gray-400 max-w-md mb-6">
              Exploring mindfulness, productivity, and wellness in the modern
              world. Practical insights for a more intentional life.
            </p>
            <div class="flex space-x-4">
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-twitter" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-instagram" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-linkedin" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-pinterest" aria-hidden="true"></i>
              </a>
              <a
                href="#"
                class="text-gray-500 hover:text-primary transition-colors"
              >
                <i class="fa fa-youtube-play" aria-hidden="true"></i>
              </a>
            </div>
          </div>

          <div>
            <h4 class="font-bold mb-4">Quick Links</h4>
            <ul class="space-y-2">
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Home</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >About</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Articles</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Categories</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Contact</a
                >
              </li>
            </ul>
          </div>

          <div>
            <h4 class="font-bold mb-4">Categories</h4>
            <ul class="space-y-2">
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Mindfulness</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Productivity</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Wellness</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Creativity</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors"
                  >Technology</a
                >
              </li>
            </ul>
          </div>
        </div>

        <div
          class="border-t dark:border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"
        >
          <p class="text-gray-600 dark:text-gray-400 text-sm">
            &copy; 2023 Mindful Musings. All rights reserved.
          </p>
          <div class="flex space-x-6 mt-4 md:mt-0">
            <a
              href="#"
              class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors"
              >Privacy Policy</a
            >
            <a
              href="#"
              class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors"
              >Terms of Service</a
            >
            <a
              href="#"
              class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors"
              >Cookie Policy</a
            >
          </div>
        </div>
      </div>
    </footer>

    <!-- JavaScript -->
    <script>
      // DOM Elements
      const themeToggle = document.getElementById("theme-toggle");
      const mobileMenuButton = document.getElementById("mobile-menu-button");
      const mobileMenu = document.getElementById("mobile-menu");
      const categoryFilters = document.querySelectorAll(".category-filter");

      // Initialize
      document.addEventListener("DOMContentLoaded", () => {
        // Load theme preference
        loadThemePreference();

        // Add scroll effect to header
        window.addEventListener("scroll", handleScroll);
      });

      // Theme Toggle Functionality
      function toggleTheme() {
        const isDark = document.documentElement.classList.toggle("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
      }

      function loadThemePreference() {
        const savedTheme = localStorage.getItem("theme");
        const prefersDark = window.matchMedia(
          "(prefers-color-scheme: dark)"
        ).matches;

        if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
          document.documentElement.classList.add("dark");
        }
      }

      // Mobile Menu Toggle
      mobileMenuButton.addEventListener("click", () => {
        mobileMenu.classList.toggle("hidden");

        // Toggle icon
        const icon = mobileMenuButton.querySelector("i");
        if (mobileMenu.classList.contains("hidden")) {
          icon.classList.remove("fa-times");
          icon.classList.add("fa-bars");
        } else {
          icon.classList.remove("fa-bars");
          icon.classList.add("fa-times");
        }
      });

      // Category Filters
      categoryFilters.forEach((btn) => {
        btn.addEventListener("click", () => {
          // Update active button styling
          categoryFilters.forEach((b) => {
            b.classList.remove("active", "bg-primary", "text-white");
            b.classList.add(
              "bg-light-200",
              "dark:bg-dark-100",
              "hover:bg-light-300",
              "dark:hover:bg-dark-300"
            );
          });

          btn.classList.add("active", "bg-primary", "text-white");
          btn.classList.remove(
            "bg-light-200",
            "dark:bg-dark-100",
            "hover:bg-light-300",
            "dark:hover:bg-dark-300"
          );

          // In a real implementation, you would filter the articles here
          // based on the selected category
          const category = btn.textContent.trim();
          console.log(`Filtering articles by: ${category}`);
        });
      });

      // Header scroll effect
      function handleScroll() {
        const header = document.querySelector("header");
        if (window.scrollY > 50) {
          header.classList.add("shadow-md");
          header.classList.remove("shadow-sm");
        } else {
          header.classList.remove("shadow-md");
          header.classList.add("shadow-sm");
        }
      }
    </script>
  </body>
</html>
